<template>
	<view class="collect-wrapper">
		<view class="top-fixed-project-list">
			<Topsearch
			    :showFocus="showFocus"
				:showCate='false' 
				:searchKeyWord="searchKeyWord" 
				:currentCateIndex="cateIndex" 
				@currentCateClick='changeCateIndex'
				@searchEvent="searchDetail" 
				@searchClear="searchDetail" 
			/>
		</view>
		<view class="collect-container">
			<view class="" v-if="searchList.length>0">
				<block >
					<uni-swipe-action>
						<uni-swipe-action-item v-for="(item, index) in searchList" :key="index" :options="options" @click="onClick(item.id)" @change="change">
							<view class="item" @click="toDetail(item)">
								<image class="img-url" :src="item.imgUrl" ></image>
								<view class="right-wrapper">
									<text class="note">{{item.note}}</text>
									<text class="time">{{item.createDate}}</text>
								</view>
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</block>
			</view>
			<!-- <view class="no-data" v-if="searchList.length===0">
				<image style="width: 100%;height: 304upx;" src="https://www.innovationgloble.com/wxs/img/wx/nomorepro.jpg" mode=""></image>
			</view> -->
			<view v-if="parseFloat(total)===0">
				<view class="sysNodata">
					<image src="../../static/nomorepro.png" mode=""></image>
					<view class="sysNodataTitle">
						暂无相关数据
					</view>
				</view>
			</view>
			<view class="sysBottomShow" v-if="isShowBottom&&parseFloat(total)!=0&&searchList.length>4">
				我是有底线的
			</view>
		</view>
	</view>
</template>

<script>
	import Topsearch from '@/components/top-search-tab.vue';
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	export default {
		components: {
			Topsearch,
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {
				showFocus:false,
				pageSize:20,
				pageNum:1,
				searchKeyWord: '',
				cateIndex: 1,
				isShowBottom:false,
				searchList:[],
				total:-1,
				options:[
					 {
						text: '取消收藏',
						style: {
						    backgroundColor: '#dd524d'
						}
					}
				]
			}
		},
		methods: {
			onClick(id){
				if(!permissionJudge('user:collection:delete')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				let that = this;
				uni.showModal({
					title:"提示",
					content:"确认取消收藏吗？",
					success:function(res){
						if(res.confirm)
						{
							that.$request.get({
								url: 'userCollection/delete',
								data: {
									id
								},
							}).then(res => {
								that.searchMyCollect();
							})
						}
					},
				})
			},
			change(open){
			  console.log('当前开启状态：'+ open)
			},
			toDetail(item) {
				if (item.type === '0') {
					uni.navigateTo({
					    url: '/pages/project-detail/project-detail?scene='+item.mainId
					});
				} else if (item.type === '3') {
					uni.navigateTo({
					    url: '/pages/activity-detail/activity-detail?scene='+item.mainId
					});
				}
			},
			changeCateIndex(data) {
				this.cateIndex = data
			},
			searchDetail(data) {
				this.searchKeyWord=data.keyWord;
				this.pageNum = 1;
				this.isShowBottom = false;
				this.searchMyCollect();
			},
			searchMyCollect() {
				uni.showNavigationBarLoading();
				this.$request.get({
					url: 'userCollection/selectAll',
					data: {
						pageSize: this.pageSize,
						pageNum: this.pageNum,
						searchKey: this.searchKeyWord,
					},
				}).then(res => {
					uni.hideLoading();
					uni.hideNavigationBarLoading();
					let array = res.list;
					this.total= res.total
					if (this.pageNum === 1) {
						this.searchList = [];
					}
					for (let i = 0; i < array.length; i++) {
						this.searchList.push(array[i])
					}
					if (this.pageSize * this.pageNum >= res.total) {
						this.isShowBottom = true;
					}
					uni.stopPullDownRefresh();
					
				})
			}
		},
		/**
		 * @description 页面初始化加载数据
		 */
		onLoad() {
			this.searchMyCollect()
		},
		/**
		 * @description 下拉刷新
		 */
		onPullDownRefresh() {
			this.pageNum = 1;
			this.isShowBottom = false;
			this.searchExpert();
		},
		/**
		 * @description 触底事件
		 */
		onReachBottom() {
			if(this.isShowBottom){
				console.log('触底了！');
			}else{
				this.pageNum++;
				this.searchMyCollect();
			}
		}
	}
</script>

<style scoped lang="less">
	.collect-wrapper {
		background: #f4f4f4;
		.top-fixed-project-list{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
		}
		.collect-container {
			padding-top: 100upx;
			.item {
				width: 100%;
				height: 230upx;
				// margin-bottom: 16upx;
				display: flex;
				background: #ffffff;
				padding: 0 26upx 0 30upx;
				align-items: center;
				.img-url {
					width: 240upx;
					height: 150upx;
					margin-right: 30upx;
				}
				.right-wrapper {
					display: flex;
					flex-direction: column;
					flex: .9;
					.note {
						color: #222222;
						font-size: 30upx;
						font-weight: 500;
						line-height: 42upx;
					}
					.time {
						color: #222222;
						font-size: 24upx;
					}
				}
			}
		}
	}
</style>
